<template>
  <div class="page">
    <back-btn></back-btn>
    <div class="left-wrap">
      <div class="radar-wrap">
        <div id="myChart" ref="myChart"></div>
        <h3 class="result">{{sexName}}是 {{data.detail}} 型</h3>
      </div>
      <div class="report-wrap">
        <h3>报告说明</h3>
        <div>
          1.你适合的兴趣范畴在蓝色六边形相对集中的区域。<br><br> 2.若蓝色区域呈正六边形或接近正六边形，在霍兰德常模内属罕见情况，本报告可能无效。
          <br><br> 3.人们通常倾向选择与自我兴趣类型匹配的职业环境，但并不代表个体一定要选择与自己兴趣完全对应的职业环境。
          <br><br> 4.如需更专业的解读，请联系专业咨询师。
        </div>
        </div>
        <div class="btn-wrap">
          <button class="button button-positive button-outline" @click="lookDetail">{{detailText}}</button>
          <button class="button button-stable  button-outline" @click="showResetDialogs=true">重新测评</button>
        </div>
      </div>
      <div class="right-wrap">
        <div class="tab_bubble">
          <span class="bubble"></span>
          <div class="title">专业推荐</div>
        </div>
        <div class="scroll-wrap">
          <div v-if="isDetail">
            <div class='card' v-if="categoryList.length>0">
              <a :class="index==currentIndex?'activeCategory':''" v-for='(item,index) in categoryList' :key='index' @click='categoryClick(index)'>{{item.name}}</a>
            </div>
            <div class="item-major" v-for="(sItem,sIndex) in majorData" :key="sIndex">
              <label class="major-name" for="" :title="sItem.name">{{sItem.name}}</label>
              <ul class="major">
                <li v-for="(mItem,mIndex) in sItem.majors" :key="mIndex">
                  <nuxt-link :to='`/zhiyuan/major-detail?id=${mItem.id}`' :title="mItem.name">{{mItem.name}}</nuxt-link>
                </li>
              </ul>
            </div>
          </div>
          <div v-else>
            <div class="list special">
              <div class="item">
                <div class="vertical-bar"></div>
                <h3>特殊说明</h3>
              </div>
              <div>{{data.specialExplain}}</div>
            </div>
            <div class="cutOffLine"></div>
            <div class="list" v-for="(list,index) in data.types" :key="index">
              <div class="item">
                <div class="vertical-bar"></div>
                <h3>{{list.value.code}} {{list.value.name}}</h3>
              </div>
              <div class="item item-text-wrap description">
                <p class="item" v-if="list.description">
                  <span class="bold">核心特征：</span>{{list.description}}
                </p>
                <p class="item" v-if="list.careerOrientation">
                  <span class="bold">职业倾向：</span>{{list.careerOrientation}}</p>
                <p class="item" v-if="list.relatedCareer">
                  <span class="bold">相关职业：</span>{{list.relatedCareer}}</p>
                <div class="no-content" v-else>
                  <no-content></no-content>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <Dialogs :content='`${sexName},确定重新测评吗，重新测评的话会前功尽弃哟！`' v-model="showResetDialogs" @ensure="reset"></Dialogs>
    </div>
</template>
<script>
import { api } from '@/utils'
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/radar'
import 'echarts/lib/component/radar'
import { mapState, mapMutations } from 'vuex'
export default {
  layout: 'zhiyuan',
  data () {
    return {
      data: {},
      isDetail: true,
      detailText: '查看详情',
      currentIndex: 0,
      showResetDialogs: false,
      categoryList: [],
      majorData: [],
      text: '正在加载数据...'
    }
  },
  computed: {
    ...mapState({
      userInfo: 'userInfo',
      hollandTest: 'hollandTest'
    }),
    sexName () {
      if (!this.userInfo.gender) {
        return '小姐姐'
      } else if (this.userInfo.gender) {
        return '小哥哥'
      }
    }
  },
  methods: {
    ...mapMutations(['SET_HOLLAND_TEST', 'SET_HOLLAND_LIST']),
    lookDetail () {
      if (this.isDetail) {
        this.detailText = '返回推荐'
        this.isDetail = false
      } else {
        this.detailText = '查看详情'
        this.isDetail = true
      }
    },
    reset () {
      this.SET_HOLLAND_TEST({ zhiyuanReset: true })
      this.SET_HOLLAND_LIST({
        name: 'zhiyuan',
        value: []
      })
      this.$router.push({
        name: 'zhiyuan-holland'
      })
    },
    getData (curIndex) {
      this.$axios.get(api.zhiyuan_report).then(data => {
        this.data = data
        let scores = this.data.scores
        let option = {
          radar: [
            {
              indicator: [
                { text: 'I 调研型', max: 10 },
                { text: 'R 现实型', max: 10 },
                { text: 'C 常规型', max: 10 },
                { text: 'E 企业型', max: 10 },
                { text: 'S 社会型', max: 10 },
                { text: 'A 艺术型', max: 10 }
              ],
              // 绝对定位
              // center: ['50%', '50%'],
              // 圆的大小
              radius: 85,
              // 里面的雷达旋转的角度
              startAngle: 90,
              // 里面的圆圈圈数
              splitNumber: 5,
              // 使得雷达图是六边形
              shape: 'polygon',
              name: {
                // 名字的展现形式
                formatter: '{value}',
                textStyle: {
                  color: '#C3C3C3',
                  align: 'center',
                  fontSize: 14
                }
              },
              splitArea: {
                areaStyle: {
                  color: ['transparent'],
                  shadowBlur: 10
                }
              },
              axisLine: {
                // 里面的直线颜色
                lineStyle: {
                  color: '#C3C3C3'
                }
              },
              splitLine: {
                // 里面的圆圈线颜色
                lineStyle: {
                  color: '#C3C3C3',
                  width: 0.8,
                  opacity: 0.8
                }
              }
            }
          ],
          series: [
            {
              name: 'le',
              type: 'radar',
              // 拐点的大小
              symbolSize: 1,
              itemStyle: {
                normal: {
                  lineStyle: {
                    // 怪异图形的边线
                    color: '#44A8DA'
                  }
                }
              },
              data: [
                {
                  // 各个维度的值
                  value: [scores.I, scores.R, scores.C, scores.E, scores.S, scores.A],
                  itemStyle: { // 单个拐点标志的样式设置。
                    normal: {
                      color: '#44A8DA'
                    }
                  },
                  label: {
                    // 拐角处的点的数值
                    normal: {
                      show: true,
                      formatter: function (params) {
                        return params.value.toFixed(1)
                      },
                      color: '#44A8DA',
                      fontSize: 14
                    }
                  },
                  // 里面的怪异图形的相关设置
                  areaStyle: {
                    normal: {
                      color: '#4BB8EE'
                    },
                    emphasis: {
                      color: '#4BB8EE'
                    }
                  }
                }
              ]
            }
          ]
        }
        let chartInstance = echarts.init(this.$refs.myChart)
        chartInstance.setOption(option)
        let { majorCategories } = data
        if (majorCategories) {
          this.categoryList = majorCategories
          for (let i = 0; i < majorCategories.length; i++) {
            if (majorCategories[i].id === this.categoryList[curIndex].id) {
              this.majorData = majorCategories[i].majorSubCategories
              return this.majorData
            }
          }
          this.text = ''
        } else {
          this.text = '暂无数据'
        }
      })
    },
    categoryClick (index) {
      this.currentIndex = index
      let majorCategories = this.categoryList
      for (let i = 0; i < majorCategories.length; i++) {
        if (majorCategories[i].id === majorCategories[index].id) {
          this.majorData = majorCategories[i].majorSubCategories
          return this.majorData
        }
      }
    }
  },
  mounted () {
    /* if (!this.hollandTest.finish) {
      this.$router.replace({
        name: 'zhiyuan-holland'
      })
    } else {
      this.getData(this.currentIndex)
    } */
    this.getData(this.currentIndex)
    //  this.SET_CHOOSE_SUBJECT('')
  }
}
</script>
<style lang="scss" scoped>
.page {
  display: flex;
  height: 100%;
}
.left-wrap {
  width: 375px;
  text-align: center;
  #myChart {
    height: 300px;
  }
  h3 {
    padding: 10px 0;
    border-bottom: 1px solid #ececec;
    font-size: 24px;
  }
  .report-wrap {
    margin-top: 40px;
    h3 {
      color: #7f7f7f;
      border-bottom: 0px;
      font-size: 18px;
    }
    > div {
      color: $dark;
      opacity: 0.5;
      font-size: 13px;
      text-align: justify;
      line-height: 18px;
    }
  }
  .btn-wrap {
    margin-top: 62px;
    font-size: 16px;
    .button {
      padding: 2px 7px;
      margin: 2px;
    }
  }
}
.right-wrap {
  flex: 1;
  margin-left: 75px;
  display: flex;
  flex-direction: column;
  text-align: justify;
  padding-right: 5px;
  height: 100%;
  .tab-bar {
    position: relative;
    span {
      color: $stable02;
      font-size: 24px;
      cursor: pointer;
      &:not(:last-child) {
        margin-right: 30px;
      }
    }
    span.active {
      color: $dark01;
      position: relative;
    }
    .triped {
      height: 6px;
      width: 32px;
      position: absolute;
      left: 0;
      background: $positive;
      transition: all ease 0.35s;
    }
  }
  .scroll-wrap {
    flex: 1;
    .card {
      position: relative;
      box-sizing: border-box;
      width: 100%;
      &:before {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        border-bottom: 1px solid $stable-ec;
      }
      a {
        font-size: $size16;
        margin: 9px 15px 9px 0 !important;
        padding: 2px;
        color: $dark;
        cursor: pointer;
        display: inline-block;
      }
      .activeCategory {
        color: $light;
        background-color: $positive;
        transition: all ease 0.35s;
      }
    }
    .item-major {
      font-size: $size16;
      display: flex;
      margin-top: 30px;
      .major-name {
        color: $stable02;
        // width: auto;
        // min-width: 150px;
        min-width: 100px;
        max-width: 100px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 30px;
        display: inline-block;
      }
      .major {
        color: $dark;
        margin-left: 15px;
        width: 100%;
        li {
          float: left;
          line-height: 30px;
          text-align: left;
          max-width: 180px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          // width: 180px;
          &:not(:last-child) {
            margin-right: 50px;
          }
          >a:hover{
            color: $positive;
          }
        }
      }
    }
  }
  .special {
    padding: 12px 0;
  }
  .description {
    padding: 12px 0;
  }
  .cutOffLine {
    border-bottom: 1px solid $stable-ec;
    margin: 15px 0;
  }
}
</style>
